<template>
	<view>
		<cu-custom bgColor="bg-gradual-fff" isBack="true">
			<block slot="content">导师详情</block>
		</cu-custom>
		<u-loading-page :loading="true" loading-text="loading..." v-if="showLoading"></u-loading-page>
		<view v-show="!showLoading">
			<view class="viewbox"></view>
			<view class="tutor_a">
				<view class="tutor_a_a">
					<view class="tutor_a_a_a">
						<image :src="TutorInfo.image"></image>
					</view>
					<view class="tutor_a_a_b">
						<view class="tutor_a_a_b_a">
							<view class="tutor_a_a_b_a_a">{{TutorInfo.name}}</view>
						</view>
						<view class="tutor_a_a_b_b">
							<text class="tutor_a_a_b_b_a" v-for="(item1, index1) in TutorInfo.label">
								<text class="tutor_a_a_b_b_a_a" v-if="index1!=0">|</text>
								{{item1}}
							</text>
						</view>
						<view class="tutor_a_a_b_d">
							<view class="tutor_a_a_b_d_a">星级</view>
							<view class="tutor_a_a_b_d_b">
								<u-rate :disabled="true" v-model="TutorInfo.star" active-color="#FBC509" :size="12" />
							</view>
						</view>
						<view class="tutor_a_a_b_c">
							从业 <span>{{TutorInfo.year}}</span>年 | 累计服务 <span>{{TutorInfo.service_num}}</span> 学员
						</view>
					</view>
				</view>
			</view>
			<view class="tutor_bb">
				<view class="tutor_b">
					<u-tabs
						ref="tabs" 
						:current="current" 
						@click="tabsChange" 
						lineColor="#CC8FBD"
						:activeStyle="{
								fontSize: '30rpx',
								fontFamily: 'PingFang SC',
								fontWeight: '800',
								color: '#CC8FBD'
								}"
						:inactiveStyle="{
								fontSize: '30rpx',
								fontFamily: 'PingFang SC',
								color: '#fff'
								}"
						itemStyle="padding-left:20rpx; padding-right:20rpx; height: 80rpx;"
						:list="list" 
						:is-scroll="false"
						>
					</u-tabs>
				</view>
				<view class="tutor_c" v-if="current==0">
					<u-parse :content="content" :lazyLoad="true"></u-parse>
				</view>
				<view class="tutor_d" v-if="current==1">
					<view class="tutor_d_a" @click="goPage('/pages/curriculum/info?id='+item.id)" v-for="(item, index) in TutorInfo.recommendCurriculums">
						<view class="tutor_d_a_a">{{item.name}}</view>
						<view class="tutor_d_a_b" v-if="item.integral==0 && item.price>0">
							¥{{item.price}}
						</view>
						<view class="tutor_d_a_b" v-if="item.integral>0 && item.price==0">
							积分{{item.integral}}
						</view>
						<view class="tutor_d_a_b" v-if="item.integral>0 && item.price>0">
							积分{{item.integral}}+¥{{item.price}}
						</view>
						<view class="tutor_d_a_b" v-if="item.integral==0 && item.price==0">
							免费
						</view>
						<view class="tutor_d_a_c">
							<view class="tutor_d_a_c_a" v-if="item.order_give_integral>0">下单预计返 {{item.order_give_integral}} 积分</view>
							<view class="tutor_d_a_c_b">已售{{item.sales_sum}}</view>
						</view>
					</view>
				</view>
				<view class="tutor_e" v-if="current==2">
					<view class="tutor_e_a">
						<view class="tutor_e_a_a">评价(99+)</view>
						<view class="tutor_e_a_b">
							<view class="tutor_e_a_b_a">好评度99.68%</view>
							<view class="tutor_e_a_b_b">
								<u-icon name="arrow-right" color="#D2B7DF" size="12"></u-icon>
							</view>
						</view>
					</view>
					<view class="tutor_e_b">
						<EvaluateList :list="commentList"></EvaluateList>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
import request from '@/common/request.js';	
import {
	loadingType
} from '@/utils/type';
export default {
	data() {
		return {
			showLoading:true,
			current:0,
			TutorInfo:[],
			list:[
				{
				    name: '导师介绍',
				},
				{
				    name: '课程推荐',
				},
				{
				    name: '评价',
				}
			],
			commentList:[],
			content:'',
			uid:0,
			id:0
		}
	},
	onLoad: function (options) {
	  this.id=options.id??1;
	  this.uid=uni.getStorageSync('uid');
	  this.TutorInfoPost();
	},
	onShow() {
		this.uid=uni.getStorageSync('uid');
	},
	mounted() {
		
	},
	methods: {
		goPage(url) {
			uni.navigateTo({
				url
			});
		},
		tabsChange(e){
			this.current = e.index;
		},
		TutorInfoPost(){
			let paramsList = {
				id:this.id,
				uid:this.uid
			}
			let optsList = {
				url: 't-detail',
				method: 'post'
			};
			let _this=this;
			request.httpRequest(optsList, paramsList).then(res => {
				if(res.data.code == 200){
					_this.TutorInfo=res.data.data;
					_this.content=_this.TutorInfo.introduce;
				}
				this.showLoading=false;
			});
		},
	}
}
</script>

<style  lang="scss" scoped>
	.tutor_a{
		background: linear-gradient(-57deg, #734FB5, #BC82BB);
		border-radius: 20rpx;
		margin: auto;
		margin-top: 108rpx;
		width: 700rpx;
	}
	.tutor_a_a{
		width: 700rpx;
	}
	.tutor_a_a_a{
		width: 140rpx;
		height: 140rpx;
		margin: auto;
		margin-top: -70rpx;
		margin-left: 280rpx;
		display: inline-block;
		border-radius: 50%;
	}
	.tutor_a_a_a image{
		width: 140rpx;
		height: 140rpx;
		border-radius: 50%;
	}
	.tutor_a_a_b{
		padding: 20rpx 40rpx 30rpx 40rpx;
		width: 700rpx;
		overflow: hidden;
	}
	.tutor_a_a_b_a{
		overflow: hidden;
	}
	.tutor_a_a_b_a_a{
		font-family: Source Han Sans;
		font-size: 30rpx;
		font-weight: 500;
		line-height: 50rpx;
		text-align:center;
		color: #fff;
	}
	.tutor_a_a_b_b{
		overflow: hidden;
		text-align: center;
	}
	.tutor_a_a_b_b_a{
		font-family: Source Han Sans;
		font-size: 22rpx;
		font-weight: normal;
		line-height: 40rpx;
		color: #fff;
	}
	.tutor_a_a_b_b_a_a{
		padding: 0 10rpx;
	}
	.tutor_a_a_b_c{
		font-family: Source Han Sans;
		font-size: 24rpx;
		font-weight: normal;
		line-height:40rpx;
		text-align:left;
		color: #fff;
		overflow: hidden;
		margin-top: 15rpx;
		width: 100%;
	}
	.tutor_a_a_b_c span{
		padding: 0 10rpx;
	}
	.tutor_a_a_b_d{
		overflow:hidden;
	}
	.tutor_a_a_b_d_a{
		float: left;
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 24rpx;
		color: #FFFFFF;
	}
	.tutor_a_a_b_d_b{
		float:left;
		margin-top: 5rpx;
		margin-left: 10rpx;
	}
	.tutor_bb{
		box-shadow: inset 0 0 20rpx 20rpx rgba(85, 56, 105, 0.6);
		width: 700rpx;
		margin: auto;
		margin-top: 20rpx;
		padding: 40rpx;
		border-radius: 20rpx;
	}
	.tutor_c{
		padding: 25rpx;
		overflow: hidden;
		color:#fff;
		margin-top: 25rpx;
	}
	.tutor_d{
		overflow: hidden;
		width: 620rpx;
		margin: auto;
		margin-top: 50rpx;
	}
	.tutor_d_a{
		width: 100%;
		height:auto;
		border-radius: 10rpx;
		border: 1px solid #351740;
		margin-top: 5rpx;
		padding: 40rpx 35rpx;
	}
	.tutor_d_a_a{
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 30rpx;
		color: #FFFFFF;
		line-height: 40rpx;
	}
	.tutor_d_a_b{
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 30rpx;
		color: #FF6000;
		line-height: 36rpx;
		margin-top: 30rpx;
	}
	.tutor_d_a_c{
		overflow: hidden;
		margin-top: 30rpx;
	}
	.tutor_d_a_c_a{
		float: left;
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 24rpx;
		color: #FFFFFF;
		line-height: 40rpx;
	}
	.tutor_d_a_c_b{
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 24rpx;
		color: #FFFFFF;
		line-height: 40rpx;
		float:right
	}
	.tutor_e{
		overflow: hidden;
		width: 620rpx;
		margin: auto;
		margin-top: 50rpx;
	}
	.tutor_e_a{
		overflow: hidden;
	}
	.tutor_e_a_a{
		float: left;
		font-family: PingFang SC;
		font-weight: 800;
		font-size: 30rpx;
		color: #FFFFFF;
		line-height: 36rpx;
	}
	.tutor_e_a_b{
		float: right;
	}
	.tutor_e_a_b_a{
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #D2B7DF;
		line-height: 36rpx;
		float: left;
	}
	.tutor_e_a_b_b{
		float: left;
		margin-top: 5rpx;
	}
</style>
